<template>
  <view class="box">
    <view class="box1" @click="back">
      <uv-icon name="arrow-left" color="#fff"></uv-icon>
      <view class="box11">接单台</view>
    </view>
    <view class="box2">
      <view class="box3" v-for="item in 2">
        <view class="box40">
          <view class="">
            <image src="../../static/image/dizhi.png" mode=""></image>
          </view>
          <view class="">山东省/济南市/历下区/山钢新天地15层</view>
        </view>
        <view class="box41">
          <view style="color: #a1a1a1;">服务项目</view>
          <view style="color: #838383;">上门喂猫</view>
        </view>
        <view class="box41">
          <view style="color: #a1a1a1;">服务时间</view>
          <view style="color: #838383;">2023-09-06 15:00-16:00</view>
        </view>
        <view class="box41">
          <view style="color: #a1a1a1;">宠物数量</view>
          <view style="color: #838383;">1只</view>
        </view>
        <view class="box41">
          <view style="color: #a1a1a1;">备注</view>
          <view style="color: #838383;">这是备注</view>
        </view>
        <view class="box41">
          <view style="color: #a1a1a1;">下单时间</view>
          <view style="color: #838383;">2023-09-06 15:00-16:00</view>
        </view>
        <view class="box41">
          <view style="color: #a1a1a1;">订单金额</view>
          <view style="color: #d24036;">￥120</view>
        </view>
        <view class="box41">
          <view style="color: #ffa54d;"> </view>
          <view style="color: #fff;background-color: #008c8c;border-radius: 35rpx;padding: 10rpx 30rpx;" @click="open">
            抢单</view>
        </view>
      </view>
    </view>
    <!-- 弹出层 -->
    <view>
      <uv-popup ref="popup" mode="center" bgColor="none">
        <view class="tanchu">
          <view>抢单成功</view>
          <view style="margin: 80rpx 0;">点击查看，前往订单中心查看已强订单</view>
          <view class="but">
            <button class="but1">取消</button>
            <button class="but2">查看</button>
          </view>
        </view>
      </uv-popup>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const popup = ref()
  const open = (() => {
    popup.value.open();
  })

  const back = (() => {
    uni.navigateBack({
      delta: 1, // 返回1个，如果是2，返回2个页面
    });
  })
</script>

<style lang="scss">
  @import url("jiedant.scss");
</style>